<template>
   <div class="login_container">
      <div class="login_box">
        <!-- 这是头像区域 -->
        <div class="avatar_box">
            <img src="../assets/logo.png" alt="">
        </div>
        <!-- 表单区域 -->
        <el-form ref="loginFormRef" :model="loginForm" :rules="loginFormRules" label-width="0px" class="login_form">
            <!-- 用户名 -->
            <el-form-item prop="username">
              <el-input v-model="loginForm.username"  prefix-icon="el-icon-user"></el-input>
            </el-form-item>
            <!-- 密码 -->
            <el-form-item prop="password">
              <el-input v-model="loginForm.password" prefix-icon="el-icon-lock" type="password"></el-input>
            </el-form-item>
            <!-- 按钮区域 -->
            <el-form-item class="btns">
               <el-button type="primary" @click="login">登录</el-button>
               <el-button type="info" @click="resetLoginForm">重置</el-button>
            </el-form-item>
        </el-form>
      </div>
   </div>
</template>

<script>
export default {
   data() {
    return {
      // 登录表单的数据对象
      loginForm: {
          username: 'admin',
          password: '123456'
      },
      // 这是表单的验证规则
      loginFormRules: {
         username: [
            {required: true, message: '请输入登录名称', trigger: 'blur' },
            { min: 3, max: 10, message: '长度在 3 到 10 个字符', trigger: 'blur' }
         ],
         password: [
            {required: true, message: '请输入密码', trigger: 'blur' },
            { min: 6, max: 15, message: '长度在 6 到 15 个字符', trigger: 'blur' }
         ]
      }
    }
   },
   methods: {
  //  点击重置按钮重置登录表单
    resetLoginForm(){
      //this.$refs 获取dom元素
      //  console.log(this)
       this.$refs.loginFormRef.resetFields()
    },
    // 表单登录预验证
    login(){
       this.$refs.loginFormRef.validate( async valid => {
          //  console.log(valid)
           if(!valid) return
           const {data:res} =await  this.$http.post('login',this.loginForm)
           console.log(res)
           if(res.meta.status !== 200) return this.$message.error('登录失败! ')
           this.$message.success('登录成功! ')
           window.sessionStorage.setItem('token',res.data.token)
           this.$router.push('/home')
       })
    }
   },
}
</script>

<style lang="less" scoped>
    .login_container{
      //  position: relative;
       background-color: #2b4b6b;
       height: 100%;

       .login_box{
          left: 50%;
          top: 50%;
          width: 450px;
          height: 300px;
          background-color: #fff;
          border-radius: 3px;
          position: absolute;
          transform: translate(-50%,-50%);

          .avatar_box{
             position: absolute;
             left: 50%;
             transform: translate(-50%,-50%);
             padding: 10px;
             height: 130px;
             width: 130px;
             border: 1px solid #eee;
             border-radius: 50%;
             box-shadow: 0 0 10px #ddd;
             background-color: #fff;
             img{
                width: 100%;
                height: 100%;
                border-radius: 50%;
                background-color: #eee;
             }
          }
       }

    }

    .btns{
        display: flex;
        justify-content: flex-end;
    }

    .login_form{
       box-sizing: border-box;
       padding: 0 20px;
       position: absolute;
       bottom: 0;
       width: 100%;
    }
</style>